<template>
	<view>
		<view class="lifet_container" v-if="pageType === 0">
			<view class="life_title ani_top">命时</view>
			<!-- <view class="life_one">小时候，我们以为自己不会老去</view> -->
			<view class="life_one ani_bottom">谁对时间最吝啬，时间对谁越慷慨</view>
			<view class="life_one ani_bottom">要时间不辜负你，首先你要不辜负时间</view>
			<view class="life_one ani_bottom">放弃时间的人，时间也放弃他</view>
		</view>
		<WhiteClock v-if="pageType === 1" @type="changePageType" />
	</view>
</template>

<script>
	import WhiteClock from './components/whiteTime.vue'
	import {
		getBirthTime
	} from './utils.js';
	let timer = null;
	export default {
		data() {
			return {
				hasData: false,
				pageType: 0
			}
		},
		components: {
			WhiteClock
		},
		onShow() {
			timer = setTimeout(() => {
				this.initLifeClock()
			}, 900)
		},
		onHide() {
			clearTimeout(timer)
		},
		methods: {
			changePageType(type) {
				switch (type) {
					case 2:
						{
							uni.navigateTo({
								url: "../../subTime/pages/blackClock/blackClock"
							})
							return;
						}
					default:
						{
							this.pageType = type
						}
				}
			},
			initLifeClock() {
				const that = this;
				getBirthTime().then((res) => {
					that.pageType = 1;
				}, () => {
					this.pageType = 0;
					uni.navigateTo({
						url: "../../subTime/pages/TimeSetting/TimeSetting"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.life_title {
		text-align: center;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.life_one {
		text-align: center;
		line-height: 50rpx;
	}

	.lifet_container {
		margin-top: 20vh;
		.life_title {
			font-size: 60rpx;
			line-height: 200rpx;
		}

		.life_one {
			font-size: 38rpx;
			line-height: 80rpx;
			color: #aaa;
		}

		.picker_btn {
			font-size: 34rpx;
			letter-spacing: 6rpx;
			width: 190rpx;
			line-height: 70rpx;
			text-align: center;
			border: 2rpx solid $uni-text-color-grey;
			margin: 100rpx auto 0;
			position: absolute;
			bottom: 15vh;
			left: 0;
			right: 0;
			animation-timing-function: ease-in-out;
			animation-name: breathe;
			animation-duration: 2700ms;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			zoom: .7;
		}
	}

	.ani_top {
		animation: enter_top 1s;
	}

	.ani_bottom {
		animation: enter_bottom 1s;
	}

	@keyframes breathe {
		0% {
			opacity: .3;
			box-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.1);
		}

		100% {
			opacity: 1;
			border: 2rpx solid $uni-text-color-grey;
			box-shadow: 0 1rpx 30rpx rgba(168, 168, 168, 0.4);
		}
	}

	@keyframes enter_top {
		from {
			transform: translateY(-50rpx);
			opacity: .2;
		}

		to {
			transform: translateY(0rpx);
			opacity: 1;
		}
	}

	@keyframes enter_bottom {
		from {
			transform: translateY(50rpx);
			opacity: .2;
		}

		to {
			transform: translateY(0rpx);
			opacity: 1;
		}
	}
</style>
